<template>
    <div>
        <van-nav-bar
                title="电影票订单"
                left-text="返回"
                left-arrow
                fixed
                @click-left="onClickLeft"/>

        <div style="margin-top: 50px"></div>
        <div v-for="order in orderList" :key="order.orderSn" style="background-color: white;margin-top: 10px">
            <van-row gutter="20">
                <van-col   span="20">
                    <span style="font-size: 10px;color: gray;line-height: 30px">{{order.movieTheatreBrand}}({{order.movieTheatreName}})</span>
                </van-col>
                <van-col   span="4">
                    <span style="font-size: 10px;color: red;line-height: 30px" v-if="order.orderState==0">待付款</span>
                    <span style="font-size: 10px;color: red;line-height: 30px" v-else-if="order.orderState==1">已付款</span>
                    <span style="font-size: 10px;color: red;line-height: 30px" v-else-if="order.orderState==2">以退款</span>
                    <span style="font-size: 10px;color: red;line-height: 30px" v-else-if="order.orderState==4">已取消</span>
                </van-col>
            </van-row>

            <van-row>
                <van-card
                        :price="order.price"
                        :desc="order.startDateStr"
                        :title="order.movieName"
                        :thumb="order.movieImg">
                    <template #tags>
                        <van-tag plain type="danger" v-for="seate in order.seats.split(',')" style="margin-left: 5px">
                            {{seate}}
                        </van-tag>
                    </template>
                </van-card>
            </van-row>

            <!--            CREATE_NEW(0, "待付款"),-->
            <!--            PAYED(1, "已付款"),-->
            <!--            REFUND(2, "以退款"),-->
            <!--            CANCLED(4, "已取消");-->
            <van-tag round type="primary" color="red" class="tag" v-if="order.orderState==0">去付款</van-tag>



        </div>


    </div>
</template>

<script>
    import myApi from "../../api/my";
    import {Toast} from 'vant';

    export default {
        name: "OrderList",
        data() {
            return {
                orderList: []
            }
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            initOrderList() {
                myApi.personalOrder().then(response => {
                    try {
                        this.orderList = response.data
                        console.log(this.orderList);
                    } catch (e) {
                        Toast.fail("服务器错误")
                    }
                }).catch(err => {
                    Toast.fail(err.data.message)
                })
            }

        },
        created() {
            //初始化订单数据
            this.initOrderList()
        },

    }
</script>

<style scoped>

    .tag {
        display: inline-block;
        position: relative;
        left: 85%;
        top: -60px;
    }
</style>